الإرفجت بالفو و وبا 


الدليل العربي الأول لأستخدام برنامج 
الفوتوشوب في أغراض برمجية 


الإصدار الأول 


تعلم البرمجة تأليف : إسلام سلامة 


20 - !211 ع . نالا لاثانانا 0-0010 


هام 


هذا العمل محمي قانونيا برخصة المشاع 
الإبداعي النسبة-منع الأغراض التجارية 
الإصدار 4.0 )إسم الكتاب والمؤلف علامات 
تجارية مسجلة لأصحابها . 


يحق لقارئ هذا الكتاب نشره بشرط ذكر 
المصدر واستخدامه قٍِ اغراض التعليم با مدارس 
او نحوها بدون عائد مادى منه. 


كه 1 ا الس قح و 10 11 سلف 0ك .زر سك هه خض .1 2115 5-3 3 العضاع 
الير مجة بالفو نور شوب يو اسطة اسافح ساممة مر خصن لموجبة رخصة المشاع 


-_- 0 2 2 2 5 5 . 
الإبداعي نسب النصلف - غير تجاريي - الترخيص بالمتل زاك دولى. 


تنويه : لا تستخدم الكراك أو الكيجين أو سيريال غير مشترى قبل أن تفعل ذلك أنظر إلى 
فتاوى حكم استخدام البرامج الغير أصلية بغير حق اللهم إني بلغت اللهم فاشهد 

الكاتب بريئ أمام الله عز وجل من كل من يستخدم هذا الكتاب في ارتكاب المعاصي او نشر 

الفتنة و الفاحشة فما كتبت هذا الكتاب إلا لي افيد غيري واعلم الناس بما رزقني الله من 


العلم النافع 
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العهرس 


إهداء 

عقدمة 

-عن الكاتب 

الفصل الأول : الفصل الأول : الويب ديزاين 


© تصميم وبرمجة 
© الفرق بين مصمم الويب والمبرمج والمصمم 
الفصل الثاني : مداخل إلى الفوتوشوب 
© نبذة تاريخية 
© الواجهة 
الفصل الثالث : مداخل البرمجة بالفوتوشوب 
© التوافق بين التصميم والبرمجة 
© الطور البرمجي للفوتوشوب 
الفصل الثالث : التفسيرات البرمجية 
© التفسيرات البرمجية للمواقع 
© التفسيرات البرمجية لتطبيقات الويب 
الفصل الرابع : أساسيات ال أ ألا 1!] 
© أساسيات عن ال ||/|| | [] 


© مما تتكون الا ]لا 
© التعمق في ال ||/ا|] |] 
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٠‏ 5ا/[[نا 
الفصل الخامس : 055) 


055 ٠ 
)255 التعامل مع‎ © 


الفصل السادس : تصميم صفحات الويب باستخدام الفوتوشوب 
٠‏ تصميم الصفحات 
© مرحلة الإضافات 
« القسم الثاني : تصميم الصفحة أقسام القراءة 
ه عرض واستخراج الموقع 
« الحصول على أكواد 055 بالفوتوشوب 
©« الجافا سكريبت في الفوتوشوب 


الفصل السابع : استخدام الفيجوال بيسك مع الفوتوشوب 


© فتح صورة للفوتوشوب بواسطة الفيجوال بيسك 
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إلخراء 


هدا الكتاب اهداء إلى أمي وأبي 
حفظهم الله وإلى كل شخص شجعني 
على التطوير والمحاولة وعلى كل 
من دعمني بكلمة طيبة ووقف بجانبي 
ولكل شخص لم يتغير ولكل شاب 
عربي طموح يطمح بالتطوير 
والبرمجة ولكل طفل وطفلة ومواطن 
ومواطنة يجلسون الأن تحت القصف 
لقلا , الشراك العساييى ارهد أدعو 
الله تعالى أن يحفظهم ويرحمهم... 
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٠‏ بف 
إسلام سلامة 
)52311107260 


0 عاماً .. عربي مسلم والحمدلله » أدرس 
بكلية الطب وهوايتي وشغفي التقنيات 


والبرمجيات ؛ قضيت العديد من سنوات 
حياتي في البحث ومحاولة التعلم وبدنت 
أحياناً من الصفر أو ابتكار طرق وإلى العمل 
بالمصادر الحرة والألعاب ومحاولئة ابتكار 
انظمة تشغيل وبرامج محاكاة (31 وغيرها 
من العديد من المشاريع . 
للتواصل : 
0 5211110 51 
7 4 04240111 
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4 4 
الحمدلله وحده والصلاة والسلام على من لانبي بعده .. 


يآق هذا الكتاب المتواضع في محاولة لرفع المستوى المحلي 
والعربي من رصيد الكتب التقنية التي تدعم المهتمين 
بالتقنيات بشكل عام وال ممطورين بشكل خاص » وجائت 
فكرة الكتاب هذا بعد البحث الكثير عن المحتويات 
المختلمفة التي للأسف شحيحة جداً في المكتبات العربية 
لذلك اسأل الله عز وجل أن يكون هذا الكتاب علماً نافعاً 
يستنفع به للأمة الإسلامية والعربية » وحاولت أيضاً أن يلائم 
هذا الكتاب جميع مستويات ال مطورين سواء المبتدئين 
بشرح مبسط من البداية للغات أو المتوسطين والمحترفين 
بإعطائهم رأس خيط لطريق جديد في التطوير بإذن الله. 


والله ولي التوفيق 
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الفصل الأول : الويب ديزاين 
لاني 7 وبرمجة" 


في عام الإنترنت والتطور والتعامل مع الشبكات والأجهزة 
أصبح المجال مفتوحاً أمام الكثيرين من المطورين والمصممين 

لإبراز مهاراتهم في هذا المجال , بدايةً لا يممكنك أن تكون 
مبرمج دون ان تتعلم لغة يفهمها الحاسوب كذلك لامكنك 
توصيل المعلومة إلى الناس بدون واجهات مرئية 01/1 سهلة 


الإستخدام إذ انك يجب عليك الجمع بين الإثنين وهذا 
مايشمله الويب ديزاين . 
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الفرق بين مصمم الويب وامبرمج وال مصمم 
قبل البدئ في سرد بعض الشروحات أحبب أن اشرح الفارق 
بين بعض المصطلحات الشائعة او التسميات فلماذا عندما 
تبحث عن عمل في شركة ألعاب او برمجيات او شركة من 
أي نوع تجد انه يطلب كل تخصص لوحده ؟ او احياناً 
يطلب مبرمج مع خبرة في الفوتوشوب أو التصميم بأي 
برنامج أخر ؟ وهنا يكمن الفرق فال مصمم هو شخص 
متخصص في التصميم يمكن ان يكون بغرض الدعاية 
والإعلان او تصاميم رسومية او واجهات او مواقع فقط او 
(31دوَن خبرة برمجية لا يصممه . المبرمج فهو العكس 
يكون ذو خبرة برمجية بإحد اللغات التي في تخصصه او 
احياناً عدة لغات «مطعرط ١ 0++ ١‏ غعم. 0# ١‏ أعم.ق/؟ 
وغيرها . مايفعله مصمم الويب هو الجمع بين البرمجة 
والتصميم لغرض إنشاء تطبيق او موقع للويب ويتفرع هذا 
اموضوع إلى عدة مواضيع فيشمل تصميم واجهة الموقع 
واستخدام لغات لتفعيل استخدام هذا التصميم مثل 
١75 ١ 5810‏ 055 :111311 وهذه مجالات واسعة اذا 
يطول الشرح فيها لذلك كان المقصد من هذه الشروحات 
التركيز على استخدام الفوتوشوب بالوجهين كبرمجة 
وتصميم. 
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الفصل لناني : مدخل إلى الفوتوشوب 


نلة نبذة تاريخية 
الفوتوشوب ليس 55 جديداً بل في 2015 دخل برنامج ادوبي 
فوتوشوب لسنته ال25 .. هذه المسيرة الحافلة بالنجاح على مستوى 
تصميم الجرافيكس جعلت من الفوتوشوب الأول عالياً في دمج 
وتعديل الصور . ولكن مع تقدم التقنيات وتزايد المعلوماتية مم يعد 
يقتصر الفوتوشوب على الدمج او التعديل انما بدئ يتحول إلى اداة 
برمجية , وهذا ماسوف نشرحه في هذا الكتاب بإذن الله وهو أخذ 
طمحة شاملة عن الأمكانيات البرمجية للفوتوشوب لأن الأمر م يعد 
يعتمد فقط على المصممين إنما الجمع بين التصميم والبرمجة كما في 
الويب وتطبيقاته, أول إصدارات الفوتوشوب ظهرت عام 1990 حيث 
كان أن ذاك قفزة نوعية في مجال الجرافيكس حيث ١م‏ تكن هناك 
برامج عملية كما نعرفها اليوم وم يكن التصميم او تعديل الصور 
بتلك السهولة حيث في تسعينات القرن الماضي كانت تكلف تعديل او 
تصميم صورة بالفوتوشوب حوالي 300 دولار أو اكثر لصعوبة 
إستخدامه ! » فوتوشوب 1.07 1 


6010 
“0050لا 


7.(). 1 1011؟ د16 05[1 ]11171 


3 5166 ,رلاودحن! حتطه[ بل[أمدن! 110035 
حمر العدوكبن[ 210 


2011001841 كدده)5(5 عجاملكة 1989-90 © اداع 1 ج20 
17 كدنة جرمحاكوه)ص7اط عحاملثة .لع حعكت: كاداع1: آلثم 
عجإامل م 0 ىاتهددمهلة: عرح 00 جمجاومغمراط عحاملكم 
:7011 ]575 


عدا بمغنامصصده) عامجيف 1987 ,1986 ,1965© '<7ررجفعج١ا‏ : 101 260 تلهدرهسع] 
عه مد جا م 74 2 0-8 


1 ب اب الج !ورف لاوز يردق 
... 21010-195 أنأا0مط8 ور 
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تفاصل 


التصميم الجرافيي للموقع ضروري جداً حيث 
أن لامكن الإعتماد على البرمجة 0065© فقط 
للمواقع او تطبيقات الويب . هذا سوف يكون 
متعب جداً ولن يكون لديك نظرة عملية حول 
ماتفعله قبل ان تكمله . بالأحرى عند البدئ 
بخطة العمل والإنتهاء من مشروعك ووجدت 
فيه او وجد فيه الزبون مالا يريد فسيتحتم 
عليك اعادة التعديل على الكود البرمجي وذلك 
سوف يستهلك وقتاً كبيراً + انك اثناء البرمجة 
سوف تحتاج إلى الكثير من التجريب والخطأ 
بالنسبة موضوع الواجهة 


5 171 
8 5052م 


01015 /ا/ا 
3ع - 
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الواجهة 


يتميز أدوبي فوتوشوب بواجهة مميزة و مرنة جداً ومناسبة لجميع اللمستخدمين , منذ 
بدء اصدارات الفوتوشوب المتقدمة 054فما فوق بدأ تحسين الواجهة بوضوح في كل 
إصدار من هذا البرنامج وهذا في اعتقادي من اكثر مامميز الفوتوشوب عن غيره من 
البرامج . في المثال الموضح بالصورة واجهة فوتوشوب 002015 أحدث اصدارات 
الفوتوشوب الحالية » نرى على اليمين قائمة الطبقات المشار لها بالسهم الأحمر تقريباً 
هذه أهم القوائم بعد قائمة الادوات لأن اغلب البرامج تفتقر لهذه القائمة / القانئمة 
المركزية المشار إليها بالسهم الأزرق وهي تحتوي جميع أوامر وخيارات الفوتوشوب 
وهي أكثر ماسوف نحتاج إليه في تطبيق الدروس في هذا الكتاب . واجهة العمل المشار 
إليها بالنجمة الصفراء قابلة للتعديل والتغيير . 


ع 
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ا 
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لع 
ال 
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5 
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واجهة فوتوشوب قابلة للتعدليل بشكل كبير حث يممكن 
اضافة القوائم أو ازالتها وتغيير الوانها على حسب ذوق 
المستخدم والاريحية البصرية 
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الفصل الثالث : مداخل البرمجة بالفوتوشوب 
التوافق بين التصميم والبرمجة 
انتجت شركة ادوبي برنامج الفوتوشوب لأغراض التصاميم 
والدمج والتعديل على الصور لكن احتياجات العام ازدادت 
وخاصة امطورين والمصميم اد لايكفي فقط الوقوف عند 
هذا الحد. 
يضم برنامج الفوتوشوب عدداً من امكانيات مداخل 
البرمجة بدثئاً من برمجة الفلاش أو اضافة السكريبتات او 
تحويل الطبقات الى كود 55) وكذلك فيما يضمن تحويل 
بعض الطبقات او التصميم كامل إلى .11112/11. 
أغلب المواقع ا مصممة حالياً على الويب تعتمد على 
الفوتوشوب كأساس لتصميم ال لوقع ولكن هناك وجه 
برمجي في الموضوع سوف نتحدث عنه بإذن الله . 


اعنعوعم0 


3120 130 0 


5م ترك 'زناارا 


7 
"زن ثأزات 


16056 
عع لزنا 
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الطور البرمجي للفوتوشوب 
يدعم فوتوشوب الأتمتة الخارجية من خلال البرمجة النصية. في 
نظام ويندوزء يمكنك استخدام لغات البرمجة النصية التي تدعم 
أتمتة001/1 » مثل .]م51 178 في ويندوز» وأيضاً يممكنك 
استخدام لغات مثل 6م11كك165مم4 التي تتيح إرسال أحداث 
.1ممث تلك اللغات غير متاحة عبر الأنظمة الأساسية لكنها 
تتحكم في تطبيقات متعددة مثل الفوتوشوب . و 4006 
01 .ع011 ]11160501 فى نظام ويندوزء 
أيضاً استخدام 101 461025 مرملاده]200 دو عاممم 
1 للتحكم ف امهام في الفوتوشوب 
استخدام8 35725011541[ الجفا سكريبت على أي نظام افاي 
يتيح لك هذا الدعم كتابة برامج الفوتوشوب النصية التى تعمل 
على أ من نظامي التشغيل 117712001075 أو05 71122 . 


للرائلد 
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الفصل الثالث : التفسيرات البرمجية 
التفسيرات البرمجية للمواقع 


بالحديث عن مواقع الإنترنت او الصفحات يممكن للمبتدثين 
التسائتل كيف يعمل هذا الموقع او هذه الصفحة او غيرها 
لذلك سوف نقوم بتجربة بسيطة لمعرفة مما يتكون هذا 

الموقع الذي أمامك ؛ *سنستخدم متصفح جوجل للشرح * 
يممكنك فتح أي موقع ترغب به سواء مدونة او فيسبوك او 
غيرها من المواقع . ثم اذهب إلى القاتئمة المنسدلة وابحث 
عن 160015 281016 ثم اختار 25 ©7238 5376 بعدها قم 

باختيار مسار الحفظ في مجلد جديد 


طن برع لخ 
الات أ0 1 اناا راياع إاا 


ااه لآلا مألضومعم برع لا 


0 كله 
00005 
٠‏ 8200011 
+ 10096 2 - 202001 
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ا 
4 5اأ0ه0 عرو |/ا 5+اما0 ...35 06م 51/2 
...اقطاعا5ق] 10 أوامثر 
35م امه كم غ01 
...3ك وداد#زمءط عوّع|0) 
565 
05 
0 ماعنا 
7530396 عاكة1 
760 8 كتناملقوالاا دا عسمعطت طاعديواع8 ٠‏ ومالمعمع 


+21 5أه0 معدرهاع/اع0)] 
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الأن توجه إلى مجلدك الذي حفظت به الصفحة وألقي 


نظرة على الطلفات التي قمت بحفظها واطلع على الصيغ 
الخاصة بهذه الملفات مثال كما في الصورة 


52 م1 0011 عغ03] ١‏ عممةلا 
بيه جه عار جم ناي عل محا نداب إثاء باه ديرف رز 
56 ع|8؟ 5ل 05:34 م 2016/02/08 ...56366 5عءع39023882ع061طء0ع5059,لمغاباط [خ 
8 1 عا 5ل 2 7646.5 945494681653-طنم-قء إن 
8 114 ع1 0_ناغدافن0 | 2 0لع30ها.أمقودط ل 
8 61 ع1 1_ماعداف0 | 0(/ 20006 1_لع30ه,أمقودطء ل 
8 103 ...00 ااا عممعطة 220102001018 اصصغط.(1)معمتوغممء © 
0١. 81 8‏ ااا[ عممعطع 2202112001778 اصغط, (2)معمتوغمم © 
01١... 48‏ اكلا عمممعطع 20098 امغطمعمتوغممء © 
8 67 عا 5ل 98 2220202 كل أقطاك وأ صضتطع-دصملصقع.والصتطكد-عم عم إن 
368 عا كك إن 
38 عازع )2 (5)1 [ | 
68 18 عا ك0 2 ككع.لاع لل مقط ادوقع 1 
6ظ عا 055 2010/02 ككع .قلقم نومع نى 
8 17 عا و0 ككع.لاععع5. اناقأء0 | | 
8 151 عا ول 5ل(1)لء طتمع_مماكصومهع إخن 
8 151 عا 5ل 5زلءعطصمع_مماكصومعهع إن 
8 11 ع1 15 كل ةطبكصة؟ إخن 
388 0 111ل عمممرطء احصغطءصمغان طخو © 
42 عااع 0معالاق] [ )| 
42 عا (1)مع اا ل 
9/1 عا ول 5[5]_لاناره؟ إخن 
68 43 عا ول 935 إثن 
36 عا ملام 
318 عا 6للام 
مما 1١‏ دائط © بك ١5.‏ 2011/12/19 مأعصم ١ه‏ 


لاحظ 

امتدادات الملفات " الصيغ " سوف تجدها " 1صغط. أو 
5. أو 75. وغيرها من الملفات الغير معرفة مثل ©51. 
مجموعة هذه الملفات هي مايكون الموقع او الصفحة التي 
تشاهدها . حيث يقوم ملف ال .1113/11 بربط باقي 

ا مفات مع بعضهم ويقوم المتصفح بترجمة ال ملفات والاكواد 
المكتوب بها ويعرضها بنفس التنسيق المطلوب. 
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التفسيرات البرمجية لتطبيقات الويب 


فكرة تطبيقات الويب مشابهة جداً للمواقع واحياناً يمكن 
تحويل موقع مبرمج بال 1112341:5 و 55© و 5 إلى تطبيق 
للهاتف او كتطبيق ويب ء احياناً يكون التطبيق اكثر تعقيداً 
من بناء موقع يعرض فقط على المتصفح وتستخدم 
محاكيات كثيرة لبناء هذه التطبيقات باللغات التي ذكرتها . 
ثم بعد ذلك يعتمد على سهول تصميم واجهة المتسخدم 
بحيث تتلائم مع اختلاف الحجم وال مقاييس . مثال الصورة 
توضح واجهة دخول لتطبيق هاتف مبرمج بال 1111/1.5] : 


2 . 3 ©3221ط/12ه» . 2"8 | تعلم البرمجة | 0 . 21263 3 ط-2 2 3 ع 1 . #ياتباييا 


لينيد 


تمثل لغة ال .111341 الوحدة الأساسية لبناء المواقع 
وصفحات الويب وتعني اختصاراً لجملة 16" 6م117 
5 م 24131121 وتطورت هذه اللغة منذ بداية 
ظهور الأنترنت وصولاً حتى الجيل الخامس حالياً فلم تعد 
تقتصر هذه اللغة فقط على الانترنت وصفحات الويب 
والمواقع إنما ساد إنتشارها لتصبح مساهماً رئيسياً في بناء 
تطبيق ال 11712001585 ١ 1 05 ١‏ 4201010 وغيرها من 
الإستخدامات . تم تصميم .1113411 لكي يتمكن العلماء من 
إنشاء مستندات نصية تحتوي على أوامر تنسيق أساسية 
وارتباطات إلى معلومات أخرى أي نصوص تشعبية أو 
تشعبات . فكانت بعد ذلك إطار رئيسي لنمو الويب. 
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مما تتكون ال .111111 
تتكون ال .1111411 من وسوم مقسمة حسب الوظيفة 


يتم كتابة هذه الوسوم او ال12895' في ملف نصي عادي 
يكتب قِ ع برنامج نصي (على سيبل امطثال 220ع8106) 
ويحفظ بصيغة .511211. أو 511134. » ويحتوي هذا المستند 
على شفرات خاصة تسمى ( وسوم "أوامر" [1نا/] (وع12” ) 
توضع عادة حول مجموعة من النصوص .ء تلك ا مجموعات 
والوسوم تسمى عناصر (1:167026215) ويفسر مستعرض 
الويب مثل موزيلا فايرفوكس أو قوقل كروم تلك العناصر 
ليحدد كيفية عرضه على الشاشة. في معظم الأحيانء يملك 
كل عنصر في ,1112/11 وسم فتح ووسم أغلاق ويتألف وسم 
الفتح من إسم الوسم مع أشارقٍ أصغر من وأكبر من < و > 
وتستخدم الإشارة / للدلالة على إغلاق الوسم . 
مثال :- 
لإفتناح أي صفحة ويب أو مشروع او كود تطبيق يجب أن 
يعرف المتصفح ان الذي كتب هو كود ,1112411 وان 
المكتوب يخص صفحة ويب او المحاي يريد أن يبدأ بقرائة 
الكود الخاص بتطبيقك يجب أن تكون البداية بوسم 
تعريفي لهذه اللغة لذلك يستخدم الوسم <:1111/1> 
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كبداية ويستخدم وسم الإنهاء له قِ اخر سطر قِ الصفحة 
<.111/1/> 

وسم الرأس <116»20> ويوضع قِ بداية الصفحة بعد وسم 
الإفتتاح ال <181111> ويستخدم لغرض وضع معلومات 
الصفحة به أو إسم الصفحة أو معلومات 21668 والتي تمثل 
معلومات عن هذه الصفحة او هذا الموقع وهذه ا معلومات 
لاتظهر في واجهة المتصفح . وبنفس الفكرة فأنه يغلق 
بالوسم <11»20/> 

وسم العنوان <1016)>وهو يستخدم لوضع عنوان الصفحة 
مباشرة <06164/> 

مثال قم بفتح المفكرة 20مغ20 وكتابة هذه الأوامر 
واحفظها بصيغة 21غط. ثم ثم بفتحها بالمتصفح : 


72> 
<ل0 مع ط> 
الا 055 مالك 


حع|]غ)/> أعه زمعط ع)عموأوعما أوراع<ه11616> 


<8-]] لا حاع و اقطء زامغخط //الاعغ" أمعخممء "'عم نو امعخمهم0" -/اأباوع-مغط وخأعمم"> 
<30ه1/> 
<اماخط/> 


6 << عععرممظ معموادع0 غورط 3 / هكذا سوف تكون نتيجة ظهور الكود فى 
ادع زوم معرواعع نا ورك ده المتصفح ف العنوان بالأعلى 


ملاحظة : <8-]] راع دواقطء زامسغخط لاع" - أ معخامم "عملا أمعخمم0 "2 /اأبامع-مغغط وخعمم""> 
يمكن عد إستخدام هذا الأمر وسوف تظهر نفس النتيجة إنما استخدمته لتوضيح كتابة وسم 0/6+3 فقط 
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التعمق فى ال.11113/11 


بعدما تعرفنا على ماهية ال .11123411 وكيفية البدء بعمل صفحة بسيطة من 
العنوان وشرح وسم المجمل <,1112311>ووسم الرأس <11620>سوف 
ننتقل للتعمق قليلاً في الموضوع بالتعرف على باقي جسم الصفحة . 
باقي أجزاء الصفحة تكتب تحت وسم الجسم <600> وهو المسؤول عن 
عرض محتويات الصفحة من عناوين واخبار وكتابات وصور والخ... 
يممكن الكتابة وتعديل النصوص داخل هذه المنطقة بأوسمة كثيرة منها 
الوسم <02>الذي يتضمن العديد من الأوامر مثل الحجم 5126 واللون 
601 و نوع الخط ع226] وغيرها الكثير 
وسم فتح الخط العريض هو <8> ويكون وسم إغلاقه محصوراً بين الإشارات 
أيضاً ولكن في هذه الحالة توجد شرطة أمامية قبل إسم الوسم <8/>. 
ويوضع النص الذي سيتأثر بالوسم بين وسمي الفتح والإغلاق وكذلك انواع 
الخط الأخرى مثل <1> <[1>مائل وتحته خط ... وعند قيام المتصفح أو 
امحاي بترجمة الكود سيظهر النص المكتوب بين الوسمين. 
مثال لعدة استخدامات لأنواع الخطوط : 


<اممخ ل > 

حرامع ]> 

انم شك احا ل1زللء 
</رادع 11> 

حرشضوظة 

<8>خط عريض</8 > 


<| >خط مائل<-/|> 

<لا>خطا تحت الخط</لا > 

<عل|ام"-60108 20117"> تغيير لون الخط</20111]> 
اا ا ل كم الك [ لاا 
<'3ممرهط13"-8 280 201[1"> تغيير نوع الخط</20111]> 


ال 1781| لها أكواد ووسوم عديدة جداً يطول ويطول شرحها اذا كنت تريد التعمق فيها راجع 
محرك البحث قوقل وسوف تجد العديد من الدروس والكتب المفيدة للتعلم . 
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1/5 م 


كما ذكرنا انه ال 077/11 وصلت للجيل الخامس وكان 
هذا الأمر ضروريا حيث أن الاجيال السابقة لم تعد تلبي 
احتياجات ومازالت هذه اللغة في تطور مستمر حتى 
يومنا هذا وباتت أغلب المتصفحات تدعم ال 118/15 . 
ما فكرة 1/15[ ؟ 


هذه اللغة ناتجة بتعاون ع30.0//ا و 11//6ىم لا الا 
حيث تحمل قواعد اساسية مثل : 
© الإستغناء الفلاش وهذه أهم الخصائص 
© البناء والاعتماد على غ+1710ع3107/356/ .و ,55© ,1/1!ا 
11/1 00ا. 
© العديد من الأوسمة الجديدة 
ه إمكانية تشغيل مقاظع الفيديو والصوت 
© العمل على جميع انظمة التشغيل مثل مافي التطبيقات. 
© امكانية التعامل عم!|]+01© 
ه اصبحت شريك اساسي في تطبيقات الهواتف الذكية 
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الفصل الخامس : 655 


كما ذكرنا ان جميع المواقع مكونة من هيكل بنائي الا وهو 
ال 131لا ومع تطور الانترنت والشبكات احتاج الناس إلى 
تنسيق اكثر للصفحات واعطاء شكل جمالي لمحتوياتها لهذا 
قامت منظمة 36//ابتطوير هذه اللغة الخاصة بتنسيق 
صفحات ال 11/1 . 
5 هي اختصار لي 5866145 عالاغ51 635630108 

5 تهتم بتنسيق الألوان والاشكال والخطوط والقوائم المنسدلة " 
السلايدات " والتحكم بدرجات الألوان وتدرجها والخلفيات وجمالية 
الصفحة من كل النواحي . 
استخدمت 055 لأول مرة بسبب الاضطراب الذي حصل اثناء 
تطور شبكة الانترنت حيث اصبحت عدة وسوم مختلفة في ال 
111ل بين المتصفحات هذا السبب جعل من قراءة بعض المواقع 
مختلفاً بين المتصفحات لهذه السبب كان يجب إطلاق لغة لتحل 
محل تنظيم وترتيب وتنسيق الموقع وتكون متشابهة لدى جميع 
المتصفحات . 
مع تطور ال 6255 ووصولها إلى الجيل الثالث حالياً اتاحت امكانية 
كبيرة للتعامل مع مختلف تنسيقات العرض بالاجهزة مثل الهواتف 
الذكية واللوحية " التابلت" واجهزة الكومبيوتر وحتى 
الساعات الذكية 
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التعامل مع 55© 


يوجد تشابه كبير بين 655 و 111/1] وتشابه العديد من الوسوم 
والخصائص اي في حال تعلمك ل 111/1 لن تجد صعوبة أبدأ في تنسيق 
صفحة باستخدام ال 6055© 


كتابة وسم 055 يتألف من 3 اقسام : 
المتنقي /10عع561 
الخاصية ب+مرع ممم 
القيمة ع لاد 


(: 3106لا : با+أمعممعط ) عممغعع56»1 


يمكن ان تكون اسم او رقم مثل ممكن أن تكون لون وسم .111111 ي 
200+ مه ازرق أو عدساظآ الخلفية يتم تطبية عليه 
مامء-لصسمعياعدطا 86039 الخاصية مثل 


اذا اردنا مثلاً ان نعين لون خلفية معين مثل الأزرق 
0 


باستخدام ال 4710/1 سوف نقوم بذلك : 


<"غعع20000"-100معع /إ600> 


أما باستخدام 055 : 


( و2 200002 :0100ع-0مناممع>اءع3ط 1 /ا800 
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الفصل السادس : تصميم صفحات الويب 
باستخدام الفوتوشوب 

كما ذكرنا أن ال 1171/1 هي حجر اساس بناء المواقع 
وصفحات الويب إلا أن هناك عوامل اخرى داخل في تصميم 
وبرمجة المواقع ؛ وكما ذكرنا أيضاً ان الفوتوشوب يستخدم 
سمي لوزاخواك الك يوفع تكلم :احميم وا حمانتة مو افع 
بالفوتوشوب تمهيداً لتحويلها إلى كود 111/1 . 


بداية تصميم المواقع بالفوتوشوب يختلف عن التصميم العادي 


وليس مجرد وضع صورة فوق الاخرى أي بمعنى حساب 
5]عه معينة لكل طبقة تقوم بإضافتها . 


لتسهيل الموضوع سوف نقوم بتقسيمه إلى عدة أقسام : 
1 تصميم الصفحات 
2.مرحلة الإضافات 
3 مرحلة تصميم اجزاء القرائة والدعايات 
4.تقسيم وتجزئة الصفحة 
5.بناء كود 171/1] للصفحة 
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تصميم الصفحات 
بداية نقوم بفتح مشروع جديد بالفوتوشوب واختيار نوع 
الصفحة كصفحة ويب " عع3م معنن " واقترح اختيار 
المقاسات المعدة مسبقاً لأنها جيدة 


قا 
]ل 0 
(1366,768) ومتمحممه غدهال! معنلا | :عمزد لتقدطتيم 
1" ..عوع27 عؤعاعم ‏ أ داء ىن إواع:زم اناأمقع8 

5-7 

5 


ْ ا ع1 الم 
+ /772اناء00 وأط عو1303! ,مامه ممم | تعاقومص عمامه 
:2 ع1130 1 
3.001 


نختار ألوان مناسبة لصفحتنا من قائمة الالوان بالأسف اخترت الرصاصي 
والرمادي بتنسيق ألون 9239#+ و 727272# واستخدام أداة ال 17001 
+6630160 لعمل تناسق جميل مابين اللونين كما في الصورة : السهم الأحمر يشر 
إلى اداة عمل الغ1م63016 : 


27 
2017 
2 

7 
5 
م 
2< 
0 

5 

© 
م 
مش 

1 

5 
5 
34 
1 

© ذا 
جلك 
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مرحلة الإضافات 
في هذه المرحلة سوف نقوم بعمل اطارات ونوافذ واشكال داخل الصفحة لإعطائها 
وونفا من الجمالع وا (اتتكدام المذانيب للأزر ار او الاعلاداكهاو من هذا القبيل: . 


لن نحتاج إلى استيراد اي صور خارجية من هذه الناحية فالفوتوشوب يحتوي أساساً 
على اطارات واشكال +0غعه// قياسية قابلة للتكبير بكل الاحجام دون التأثير على 


الأن سنختار اي شكل نرغب به لعمل قائمة بالأعلى مثال شكل مستطيل منحي 


من قائمة الفلاتر نختار ©5056 300 لإضافة لمسة تشويش على الدائرة 


© 1005 © 


* [-39] تصسدصه 
كك 
0 لاط وام - 
]نا (©) 
55131ناة6 () 


ع1أ6073]تاءممماك! [ ) 


واخترت لون رمادي ادكن لعمل الأزرار ووضعت عدة ازرار بمسافة صغيرة بينهم 


ألأن اضافة النصوص للقوائم 


بعك سس كيلع لعفم كلها حكيينك 


بعد أن اتممنا القائمة الرئيسية ننتقل إلى عمل باقي الصفحة والتي سوف تكون 
مك لين اديه قمر ر لسر ولس يا ع :1لا دا كر ى وال جرد ريد ته ار 


اقسام الصفحة مكونة من مستطيلين افتح باللون لسهولة الانتباه والقرائة 


ناعكا لاي “تلح لعفاف كلتل حكيليك 


ألوان وتناسقات الصفحة تعتمد على رغبة المصمم هنا بعض التناسقات التي يمكنك 
استخدامها * 
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7" 10096 بعدمن 2 أهمه1؟ 


> 10096 :لاس 8 بي 


القسم الثاني : تصميم الصفحة 
يكون هنا لدى المصمم خيارين إما جعل المحتوى ثابت اي بتفصيل صور داخل 
محتوى القراءة او جعلها لا تحتوي على شيئ وتغير ذلك بواسطة الكود لاحقا 
عمل ظل لأقسام القراءة 


امل ج51 ممعم 
ع ملع نم5 


اععوة0 0 3 بأمطانك! | ععله1»! لمعاع 
...ع اط5 بزعلا *| _8] زه 0 لعي 
الع ايههم |7 *«ونا ادضه مدن 7 5[ __95] ( 1 ) لومم 
سي<ا 


ه30 ط5 مم0 غن0 عاعهم)! ععبزها |7 ] 
| نواعم معوععة | | #ندادم عدا | 


بالنسية لمكتزى القسيم هوق اقرء يعمل مكل الدعابة لشعار ي و ورضيعها داكن القسه 
الأول" اليمين". كما في الشكلء النهاتي 


تقطيع الموقع بالفوتوشوب وعمل روابط 


1 معلا 310 ععتاط عماء5 عمليز1 عع 
كأهتامهت) ١م‏ هأكمة 1 ننوه اك 


د * (8/8#؟! ,2 عا و«مسهافع؟) 66.796 © 1-لعلأنامنا 2 > 


260105 
--- 
00 -: 
لدع 1 لمقوطقيم 
نا 


كه 1 كت اسسيس كييلتك لكف ينها حكليك 


مع داك زد مد لمم 
7 25 86 بففد 29 
له 85" الآ ذه 9 
لها اغا اا 52 لها 


0 كعبرها 
للى :1 1 © للم 3 0 م 


#اسصاوم 
“عسو آه 0 
1 لسحمطضم + © دولةة - 53 
3 يل و 
]| | 
0 ات ذ كا علأومععينا 5 
لت كا | ا 
2لا 
مسرم ]7 
9و عرها | | 7 
نط 31 ]إن 
17 عاومطهر هر | 
98 - 17 1 عاومطعهم 5 | © 
رس لط لا اما © كرا 


وو ورون هه واوكه؟نا 
اعاعم ات وباملاع موجن5 برط ملعهمم 
عدم أطوار 


7 1 8-0 واه كا مل نط ا كه » 9 ه« برام © > م 


اعلا 
1 


لم 5 8 


4 0011/1781 يعمهم 
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بعد أن عرفنا كيفية تصميم واجهة صفحة جميلة باستخدام الفوتوشوب حان الوقت 
روابط وتفعيلها لأزرار وقوائم الصفحة الخاصة بك . 
علينا بداية أن نعرف كيفية تقطيع كل جزء في الصفحة ومن ثم وضع الرابط 
الخاص به عليه من خلال الفوتوشوب . 


سنتستخدم لهذا الأمر الأداة أمه د ع5||6 


الأن نقوم بتحديد كل زر او خانة تحتوي على رابط لوحدها بواسطة الاداة التي 
ذكرتها » مثل مافي الصورة 


كك لصيس سيرع كفن ا كلتك 51 


8 قهغ 608 


الأن نقوم بالضغط بالماوس اليمين على مكان التحديد واختيار 5مه]غم0 م )|5 +زلع 


ونضع في خانة 81لا الرابط الذي نريده على هذا الزر 


ش :م ععالع 
5 
للها 
1 
]تك عوتودعلا 


5 : 
نلا [___63] تلا 
:00101 0انامروكاء 83 00 اناهوكاء83 ععناك 
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عرض واستخراج الموقع 


بعد أن ة قمنا والحمدلله بتصميم وتقطيع الموقع حان الأن دور عملة نظرة عليه 
واستخراجه لأستخدامه 


الفوتوشوب يوفر هذا الموضوع 
من قائمة هع نختار غ01م«ع 
ثم نختار الخيار 6ع/لا :0 51/6 


الأراع ا ]لاك جعاثر ...كل أرممط اخ ]معدا 
معمصمقطعق مه عرمطك 
2 : - ماع صغ5 عطدنمث طعروع 5 
ذح اا ]لاك جعابثر ... العقوع ا) داع لاا .نش عيتدذ 
لمع ملع طمع عمواع 
...انا مذ كنوه طاريم ..مععامنا عمواض 
مع ال هنا كمحصم) رع/ز3 ا ...ع ودوتاعءوم 
انا هط كمحوم) رع:ز3 ا 
٠‏ 00 
ا رارع | 5 5 0 
.كعاطة !آ منعامها رمام ا 
2 غم مجرحما 
كع | 35 كاع5 313ل] 
ااا ]اك جنا فصا عاط 
تظهر لنا العديد من الخيارات منها اختيار جودة الصورة وعرض صفحتك على 


سن | 051 


68م ما +رع ممه |7] 
ماه© عمأتمما"! | :لاع بعرم 


ص1 ع مامه لوه غأاولرلامه© ١‏ :5أولماء 1 


عاطة1 ,ماه 


اتاد لدم 3-7 ]5 


| 1 
52 10392 
9 تأمعم عم *م[_ 1366| :للا 
3 عاطنه8 | :قن :| احم :4 
لو سن 
00 :035لام0 ومام00 ]1 


000 ١ 
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الأآن بعد أن عرضت صفحتي من الخيار بياهزباعم تظهر على 
المتصفح 
هكذا تظهر الصفحة الموضوع يشعرك بالفخر (]: 
الفوتوشوب يقوم بعرض كود ال 171/1] لك بإمكانك التعديل عليه لاحقاً 


600 0616| أورمإن؟ اأنعطم مأنل | اع)51 


حتصعه 
حتسوظه 
جه2-14/:1ه 1 اع جه :21> 
"عدم مدعسك ‏ وتصصاط عو "«اسمساعدت ‏ "مج1 مدت "نميه -ج< عهانه 
<"وسد- ده" «احهناجدت ‏ "عموسعح "اندي ه-ج< عدهاته 
2 مدت "دتمت مناه “ا 1ديه-ج 2< عناهاته 
<” "معدت "نمعتيم "سحاديه-ج عط عذهاته 
حتسهظ> 
<0 "سن همدو معد *0؟ سطع ا اجذوحعده 707 6 د > ٠--1ددوط_رزقدظه‏ 
<-- 1م همد عومكةك طوه عدء وحم --41> 
<ن؟سوجوع مود تزهه '«وحتكةسح زهت *05”«جمقودط "769 "سطوفهذ 15557" "31_متعه 1 "عكة هتطه 12> 

هه 

<5ه«مجموددت 454 

حة ةاعد »1ه 61 «سوكهتهذط 2 "«طعضة» *120716556325551. 31_جنت_امش مو #اعهسموع5"عدعد وصنته 1 

جع »> 

> 


وموم هته 


حد مد سدده *1«سنطودمط *1169*سطنمكم 72145543156517ه2 الت ع3 -دمد وسته 
حعدر» 
جع2>» 
+2« مسممجميدع *2مجمج اده 424 
ده ممععسه سم عسي لماه سخ ع مومع لمعه لح سملة تنمت ةتس نصحو نت سنوت 


الأآن نحفظ الصفحة من الخيار 531076 


ونختار 003865 | © 11/1!ا 


المتطإعودط برانا 
365م]]| قدة اانا 1 نا 


سيصبح لديك ملف 171/1] يضم الصور المقطعة بالصفحة ويضم الروابط التي أضفتها 
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الحصول على أكواد ال 655 بواسطة الفوتوشوب 


الفوقوشوب رفز الكقيو دمن الكيار انك البورمدية كما ذكرنا عن هذه الخبارراك الممقافة و الخديدة 
نسخ اكواد ال 655. 


يمكن استخدام هذه الميزة في الحصول على كود 055 لطبقة معينة او تدريج الوان معين 


لها 
يجب بداية تحويل الصورة او التدريج إلى تطبقة لكي يتمكن الفوتوشوب من بناء كود 255 لها 


من قائمة /عل/إج ا 


نختار 055 لإام0© 


ح !]| /رنت| تيا بيك ذا 0-1 
55 برمه© 

...]ع لزق ا عذقء أأمنانا 
8 ,0 يعلإه١)‏ 10096 © 0-3ع1511ولا ‏ << : ٠‏ عغعاع0 
' +1 ) +ج ]اد لاط 5ه غرممعط عاء انا 
'+ ا ) جخ] ]اد اث ...كش غرومعع 
.اع لقا ع جمقمعم 
٠‏ عابؤد عنزة ا 


وهكذا يظهر الكود بعد نسخه لهذا التدريج بحسب حفظه كصورة 26م 


(”8مم.0 ععلاق ”)1لا :ع0-1138صنامععكاء3ط؛. 4 0_ععلإا3 ا 
305010 :0511600م؟ 

“م0 :غ+4ع1؛ 

“م0 :م0غ؛ 

“م900 :106/ا؟ 


“ام600 :+طع1عط؟ 


1 :اع2-100؟ 


1 


ملاحظة : هذا الكود يمثل حجم الصورة بعد نسخ كود 055 أي انه ليس 
تدرج الألون إنما تنسيق الصورة هذه في الصفحة 
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الجافا سكريبت في الفوتوشوب 


كما تحدثنا عن الجافا سكريبت ؛ الفوتوشوب يوفر التعامل مع السكريبتات 


من قائمة ه11 اختر 52110165 


دكي ا 31 دنار 
اومكعععوعثم عوهمما | كأمل5 
يأ م 
كتعنوها ممع الف عتعاعن التو 
ا+ا اجن ]اك جار مهلصا عاط 
عاعع اا ععنزها ااث معذاواءآ 
كعاعدابة] اث دع نوا ساون ذا 
20 0 ناخ ]ا ررك عذاكر لزممنا عونا خممم 
ماع وقصمهابا عتمعمط امعد 
5 لاا | 
ماع و5 مامز ععااط عهصا 
كتعاط الانانانا عاصغاساة مهما 
مقع 5311511 


ثم حدد البرنامج النصي من القائمة. تتضمن قائمة البرامج النصية كل 

ملفات البرامج النصية المحفوظة بملحقات أسماء الملفات .وز أو .وز 
والمحفوظة في مجلد 

ع معطدمغخ0طط ع٠طه‏ ل خم أاع600١(86<)‏ دعاأء موععمءط 0:١‏ 


55 5غع65 8 32) 2015 


لتشغيل برنامج نصي محفوظ في موقع آخر 


3. 


من قائمة ه11 اختر 15م501 ثم اختر ع5/لا8]/0 
وتصفح وصولاً إلى البرنامج النصي. 


عد سكي اد 

»111010 07:03 م 2016/02/08 زام0 كاأملع5 خمعبط 77 

؟عاه؟ ءازع 07:08 م 2016/02/08 بزام0 امعد عاء ه52 إل 
8) لك ... غم 3/357[ عطوهلم ‏ .... 12:05 2015/05/29 »ول 50 16 كلروم8 غيم /** 
3318 ...؟ م3:35[ عطهلم8 . ... 12:05 2015/05/29 »كزع وصقطك علمانا اقصمةتلمه© ,؟** 
68 343 ...؟ 4م3035[ عطولم ‏ ... 12:05 2015/05/29 »كل المع طقف وخمه© /** 
108 ... +م71ء3::35[ عطهل 8‏ ... 12:05 2015/05/29 »#كلكاع نزقا امع الشعئعاء0 ,** 
5068 ...؟ 4م11ء3/35[ عطولم8 2 ... 12:05 2015/05/29 #كزركع اا 10 كتعنزق ا غرمم8 /** 
68 29 ...] أملعء5ق::و[ عطهلم ‏ ... 12:05 2015/05/29 #كزكع أطة] منماههارهامع مم8 ** 
2018 ...] غم1,ء35/اة[ عطهلم8 .... 12:05 2015/05/29 »كزع وقمطا +25 /*" 
8 19 ...] 4م3035[ عطولم 8‏ ... 12:05 2015/05/29 »كل كاعع 7 بعنزق ا ال معواع ,©" 
188 ...؟ م3:35[ عطملم ‏ ... 12:05 2015/05/29 »دك اكةا/ا! الث معغواء ,©" 
308 ...؟ أم 3:35[ عطه0ل 8‏ ... 12:05 2015/05/29 »وزع أماء معو /** 
8318 ...؟ م3:35[ عطهل 8‏ ... 12:05 2015/05/29 “1.5 مك5قعع870 عوهمما ©" 
5216 ...؟ غم1ء3::35[ عطملث 6‏ ... 12:05 2013/05/29 #كزكع اا 10 كممممع عنزها ؟* 
25168 ...؟ أم 0351و[ عطهلم ‏ .... 12:05 2015/05/29 »ول 201 10 دممرمع يعلزها /** 
68 29 ...] أم1,ء035ة[ عطهل0م 8‏ .... 12:05 2015/05/29 »زاعع11م© كمع ا /** 
10 ...] م3:35[ عطوهلم ‏ ... 12:05 2015/05/29 »وز21201/1 ل0دما /؟* 
8 4 ...؟ أملءؤ5ق::3[ عطهلم 8‏ ... 12:05 2015/05/29 »كزعاء 53 مغمز ععاع مهما ,©" 
8 19 ...؟ م3:35[ عطملم ‏ ... 12:05 2015/05/29 »دوزملا م7عوعا/ا /؟* 
8 40 ...؟ م30:35[ عطهلم8 2 ... 12:05 2015/05/29 “كزع واع لممغمطم 5 
68 49 ...؟ 4م3035[ عطهل8 ... 12:05 2015/05/29 »كزع وقصدا/! كتمعيظ غمتن 5 /** 
78 ...؟ م935[ عطولم 2 ... 12:05 2015/05/29 8 
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إستخدام الفيجوال بيك . 


للفوتوشوب 


كما وسبق ذكرنا الفوتوشوب يدعم العديد من اللغات البرمجية . احد هذه 
اللغات والتي اعتبرها من المفضلات لدي لغة ال غ+56.ع8351 1ولذأ/١‏ 
اذ تتوفر عملية اتصال محاكي هذي اللغة +©010.06باغ5 031اؤا/ا مع 
مكتاب الفوتوشوب التي تنصب مع البرنامج بشكل تلقائي . 
بداية سنقوم بعمل بعض المشاريع المتربطة بالفوتوشوب والفيجول بيسك . 
يمكن استخدام اى اصبداز .من القبجوال.ستوهيى لكن انا يتوفن لذي شيف 
0 و 2012 


ووم لا 
| علا 


سنقوم بعمل بعض التطبيقات بالفيجوال بيسك عبر استخدام المكتبات 
المرففة بالقو دو نوي هنال اعد هذه التطبيناك: هق الدو ذو تيو ين . 


هومصطلح يشير إلى استعمال الحاسبات ومكائن والأجهزة الآلية وذلك 
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أتمتة الفوتوشوب 
اذا كان لديك مجموعة من الصورء لكنها لا تبدو جميلة. وقد ترغب في 
زيادة التباين أو تحسين الألوان لهذه الصور . من خلال الفوتوشوب يمكنك 
جعل وظيفة التباين التلقائي لتصحيح الصور وجعلها رائعة. لا توجد 
مذكلة ذا كانت فلك هيار ة عن عتير اك هن الضصور. اذا لى :كان ينذاك 
مئات أو حتى آلاف ؟ فتح كل صورة في برنامج فوتوشوب, وتطبيق 
نقوم بأتمتة جميع هذه المهام والسماح للفوتوشوب بالعمل الجاد بينما نحن 


الموضوع ممكن بواسطة برمجة برنامج بسيط بالفيجوال بيسك 


نفتح أولاً الفيجوال ستوديو ونعمل مشروع جديد كالمعتاد ونسميه 
ملاثى5ه مثلا 


علينا في البداية اضافة ال 11127 أءءز0 «رزهمطاوه250 ال مكتاب الالتى تنصب 
تلقائياً مع الفوتوشوب 
من قائمة غ+ععزمم6 نختار ععمعمع1ع/ 3010 


من صفحة 000 نبحث عن اضافات ال م0طومغ0طط 0066م 
المتوفرة 


10015 قصمممط 038 7نوع1 ونطعنا لاانس8 +غعرزم,م 
..تطكهط كنختو ل صالالا مامش قت 
...ام غصمن عونا لمث 2 


.لاع صم مححهت للم 5 

لالاكيرك اكبوره ل مالالاات 1 ... عصيز! 1,0 صماحم شام عط !ا أطاودوععء يم 97 
حك كي نات : قطنا عميز! 5نا ممعم ...ع انكها/! 00م لغ 
يلات ١‏ بمقعطانًا عم أمغمم عايته اع باع بثر © للثر يذ 
كعاط ممروءومرطات 7 5 
) كعااط جموعءومءط ات 9 نموعطنا عميز! 9,0 ممطومغمطه عطوليم شرج ]اذ +1 ...لعا معلا لهم لنت 
6 ععااع ممموممطاتع 1 ...عزط0 2015 ع ممطومغمهم عطومم مجاقع .لصعغ! ومؤكةظ وث ‏ لنننا 
) كعاط دوعوم ه01 1 ...عصلاز! 2015 )) ممطومغمطه عطولم 
ععااع هوم رطع 1 لطهءطنا عميز؟ 1.0 عع تالضف طهمم عع زم8 مممم] علوساءعط 
)عاط صموومرطانت 1 للققطنا عميز! 3,0 امخممعوم عع ]زع ااثر ببحمطة لق 
م كعاط دموعءومءرطانت 1 م .صواط امعمغممظ عدماصنحه نال دصنطام 

ي © كعاط جموعوم8 01 1 ...ناعصيز! 1.0 ععوأيعغما_الاام_١‏ اباش 


2 *< مقع وعرعقع 8 اع زارا نامث 


أمععع8 | عوسمم8 | عععزم,م ١ 201/1 ١‏ عل 


طغوط مماععلا طناعميا1 عمقلا ع0 مره 


5 ]| عامطامه | غععرمءظ طاععمم]ع8 


حت 0 اك 
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ملاحظة : اذا واجهتك مشاكل ورفض البرنامج اضافة المكتبات قم بإضافة 
المكتبة الأولى فقط ي(م2ع6ذا عءزط0 9.0 مهطومغ0 طم 
جميل . والأن لنتوكل على الله ونبدأ في مشروعنا 
الأن لنستطيع استخدام مكتبات الفوتوشوب التي أضفناها يجب علينا 
تعريف الفيجوال ستوديو عليها واستيرادها وذلك بعمل 70016 


ويتم وضع ذلك |همع0م0عع مأ ع36م3065م مهطدمغمطم 


م050غ+ه0ط2 5غ01م111 


الأن لدينا عنصرين للعمل ال 011>3+100م4 موطوهغهمم 
7171لا 00 مهط5مغ+0طط غ6 غ2ع006 


لذلك نقوم بتعريفهم في 254140 01355 ©11ملم 


1120مم. م0+8050آ2 8485 مم53م 0111 


الا ع0 . م250+80510 85 ©5]00م 0111 


سيروم 4ه 


مرمجاكمغمواه 5 نم11 


مطايشك2 1355 ع11طنم ع |! 
لتعرتط . كمدط . كاله لاا . ومادمزك 5 1ععطمط1 


عقمع لق2قع مومع «عموع 1دعنا ودرمعط ودنام نم 1لا 0 


1137 درت . ومادمغمله كثئ ممقدكم هسنا 
111 72اناء مانا . موومادمغم5اه كثئر عمتاكم سنا 


الأن ننتقل إلى واجه البرنامج قليلآً حيث نقوم بإضافة 2 من الأداة 
2188 1ع 5نامع م ع010] 


ومادتناءع دمر قرع لامع ل 


ونقوم بتسميتهما إلى 10 8 ممح 


ها ودأناناءعدههتمم تناع لام لهأ تصحم اوه أقاناءعدهههمم تاءع اد لهأ 
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الأن للعمل على الواجهة نحتاج إلى إضافة : 


0 4 
0850 | 2 
الزر 11 31لا 
1 00 ا لمع ]طعا 
2 10 0 آطع ا 
3 5631 56321 
4 طع83 ضمغا 
5 3 11 طعا 


ال »“امطغلامخ نسمي واحدة 


[1200 
16*10 


بالنسبة للتنسيق فالخيار يعود لك أو زيادة إضافات اخرى 


م1وم اهم عونم 8رعوامء كا مدع وهاد م عدوم 8رعوامء كا 
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مرحلة الكود 
كود ال 10230 مع 


55 © 31ل/الا8ة رغأععء[7.06اع+ كلاد 85 اإع250عء5 31ل/الا8 )5300_6030 اباد ع11/36مم 
40 .ع835لاإالا 5ع2501ول (دعطاتمخ دع/اط . اماع 5 لاك 

5 11206©0مم اعلا - ممة5م 

©2315 - ©15116/.مم53م 

3/0115 1م15 . 250131085110065 - 5ع013108الا13م015ا. مم53م 


- 0131085الا13م3©11015طلا13ط . مم3 5م 
3/15 1م15 . 5013108/10065م 
"6:١0"‏ - غلاء] .ورمم عطععراع 
75 كت 546[ لا 1 
بادك ممع 


كودال +1«ع للخروج 


31لالا8ة وغأعءع06. اع كلاد 5ق 'اإعلمع5 31ل/الا8)>اء1_611اعمغعط اباد ع11/3مم 
>ا 611 . #11اعمغط 5ع1لصوتك (دع افا مع/اع . لاع ولاك كم 
(01. مم3 كم 
()ع6105.عل"ا 
طناك ممع 


كود ال +عجغ5 لبداية العملية 
002605558 5326 ' 
1/الا8ة وخأءع7.06اع كلاد 85 اإع250ع5 31ن/الا8 )»ا 532_611مغط اباد ع11/3مم 
>ا 611 . +صضقغك5صغط 5ع01مقولك (دعع م مع/اع . للاع ولاك كم ع 
©2315 - 0م361مع . خموغدمعم 
و لاع 1 .011 الا ) 66151165 . /ا1801ع»0116. 10 - ع108م+5 85 ()51165 011 
تاد” 
5 1 5220128 5م 1 طءوع عرمع 
(1+)06عم0.مم53م - عناوم 
د اعلا اعم . ممطدمغ+م0طط كم ععلاقاغمعع اناه 0111 
(اع/ا3 اث . م0طدم0غ+مطط رخعلإا3اع/11+ع2. 5002م )عملا1 © 
()000035غناق . علا 3_اأمعمطناء 
()15عم/اعامطنام. ععلاقاغمعع عبن ' 
5 2565[ . م0طد5مغ+0طط باعلا 85م ع8عم[ز 0111 
8 - /اغ+000311. مم3 
و8©م[ و(306)41للع211غ+66. طأاج2 . 10 + غلاء1 . 10غ<7) كمع /ا53 . 5002م 
(2 وع©2315 


()ع6105.ع00ا5م 
اعم 
علا 1 2 0ع1ط3مصع . أموعكمع6م 
باك لمع 
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كود الباتش 


امنا غ ' مدع060) ع5128د5ععممم طء318ط ' 
85 © 31ل/الا8ة رغأءع1.08[6اع كلاد 85 ععلمع5 31ل/الا8)>اء11©_اءع83مغعط اباك ع2ق/ح1زمم 
»ا 011 . طاععقظمغط 5ع36016لك (د5ع عتما ومع/اع . لاع 5 لاد 
( لاع 1 . لامع عا لاع ) 5ع511غ66. /ا1601عع011. 10 - 522108 85 ()51165 011 
(2 و(52128)ءصلا66+1)ع1255306ع3+8ع020 . لاوععم - لإاوععم 5م 21165غ6ئام12 011 
(6 و(5)0ع4116)ع310ل/اأع5. د5ع211غ6نام1 
(1 و(71165)1)ع3106/ا+1ع5. د5ع211غنام م1 


835 باعلا 85 +م0طع3ط 0111 
0106 5م . ©6مل/ا601 258385206511311 - 5+15231600ع0. +ممطء3ص 
ألا 1 . 210 - خزع5+1381015010ع0. أممطء63 
علا 1 - وعم0ع10ع]عء١0.‏ +أم0طء 63 
علا !1 - علاوك5ع010عع/١01‏ . +1م0طء63 
علا 1 - لاعم550عممناد. +1م0طء631 
"ألا . 08 امغنموط١ا:نع"‏ - 116ع2مممعع . +أممطء و6 
عملا 1 1311108ا5511ط 5م (0)ع1/311028+ 011 
1110 لطا رمع1اناء 50م . ©0/ا1 551531113111108 - (103108)0+ 
8 - 31108للع211 . غ+*ممطء 63 
لا1 
و"81005+ع8 06831018" و"15000835عل/اع اهنم" رد5ع5116]ناصمط1)طءغع83 . مم3 كم 
(غ+م0طءعو6 
0غ 5ل لاه طاءع6036 
(()10521028 .كاع )عامقع وال 
لا16 ممع 
طبادك ممع 


الأن زر ال مرممع 


5 © 31ل/الا8 وخءعع[06. لاع كلاد 85 أاعلمعء5 31ل/الا8)»اء 011©_تزمع عامغط اباد ع32/حدزمم 
»أ 611 . المع ضغط 5ع36016لك ( دع عاتم ورع/اع . لاع 5 لاد 
( ) 013108انياه طك . لازم تا ع013160اناع د رامع قمع 010 
"١"‏ + لاع وطلعغعع1ع5. ارمع عاع13160 امعد نامم قاع 20106 - غلاء1 . ورمم عاععاح 
طبادك ممع 


وأخيراً زر ال 70 


5 © 31ل/الا8 وأععء[06. لاع 5لا5 85 *اع0مع5 31/الا8)>اء70_011صضغط اباد عغ32/نح1زمم 
>1 11 . 1[0ضغط 5ع016مقلك (دع عتم مع/اع . الام 5 لاك 


()013108انناهمطك . 1310810امع كنبامع قمع 010 
"١"‏ + طغعحهلع8عع1ع5. 10ع131608“اءع ودنام 201068 - غألاع[ . 686160 
طبادك لمع 
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فتح صورة على الفوتوشوب بواسطة الفيجوال بيسك 
دن أكار ١‏ ,اسل لعي كيده للع كدر ري والشدران يبك لذن 
الفوتوشوب 
كالمعتاد نفتح مشروع جديد ونستورد مكتاب الفوتوشوب كما سبق 
وفعلنا 


نضع في ال 6606/21 
نضع في ال 1355© 11ل« مايلي 


001120 . ممطدهمغ+هطط 45 ممخامهطد5م0غ+ه0طط 0111 


11 انا ع0 . مهطده0غ+ه0طط 85 ع ورامهمط5ه0غ10آم 0111 
اع /ا3 اع41 . ممطدمغ+ه0طط2 5ق عاعلا3 ءالا 0111 


الأن نعمل على الواجهة نقوم بإضافة زرين أحدهما للفتح والأخر 
للخروج 


| كادف تضم منمده همه 2 | 


عمل الدع 


كود الفتح 
5 110مم28 تاعلا - ممخمممطدمغ+مطم 


5 1 لا3 1م5015 . 251013108110065 - 0131085لا13م015. ممخامم هط5هم+مطم 
15ل ة 1م 5115م . 25113108110065 - 0131085ل/ا13م15>اع3ط/ا13ط . مملرم هطد5هم+مطم 
("'08م. ١11‏ : عرابط المكان الذي توجد به الصورة " ) معم0. مملامهط5م0غ+0طم - عولامهطدمغهطم 


كود الإنهاء 


(5 و5)ع1138ع512ع5 . ع00م0 5ه هلام 


()ع105ع6.عه0امهط دمغ همطام 
()0001. ممخلمهط5همغ+مطم 
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اام 


ال بإذان ابثرتعاى أن يلوا ونا اللئاب وا لون 
قر ناسب ميخ المستورارن التخطيرر وأختكى قر عامدة تحن مفموم 
التطوير وابتكار اووات للك 
أ وو لي بالرم: والمغفزق 
رسلق على الغيسبوك مم8 وووراج5 «الرنة و 
0 الك 
كم ل الرين : إسلام سلام: 


م راش . 
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